<script setup>
import { ref, onMounted, watch } from 'vue';

// 角色数据
const characterData = [
    {
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/100.avif"]
    },
    {
        name: "梦酒殇",
        title: "招生办",
        desc: "我请问呢?老大你在不好什么?",
        tags: ["无名大王", "暴揍老大", "咸鱼!!!"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar83.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/咸鱼/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/咸鱼/2.avif"]
    },{
        name: "小陈发大财",
        title: "奶妈大王",
        desc: "都过来吃奶！！！不吃奶就去死啊！！！",
        tags: ["阎王大点名", "后宫佳丽三千", "我看谁不卸势！", "美食品鉴官"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar35.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小陈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小陈/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小陈/3.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小陈/4.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小陈/5.avif"]
    },{
        name: "施流岁",
        title: "奶妈小王",
        desc: "不要瞧不起我啊！混蛋！我的奶量也是很足的！",
        tags: ["新星奶妈", "压力再大点", "血条包稳"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar61.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小施/1.avif"]
    },
    {
        name: "闲换星",
        title: "小水？",
        desc: "万千分魂，那个才是真正的我？",
        tags: ["本体", "分魂", "桀桀桀"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar39.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小水/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小水/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小水/3.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小水/4.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小水/5.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小水/6.avif"]
    },{
        name: "玉锵然",
        title: "好人",
        desc: "君子坦荡荡，小人长戚戚。",
        tags: ["诚实", "直言不讳", "小玉"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar34.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小玉/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小玉/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小玉/3.avif"]
    },{
        name: "昭千",
        title: "声音洪亮",
        desc: "混一局，躺一局，调整心态下一局",
        tags: ["尘尘小王", "小昭", "电话骚扰"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar42.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小昭/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小昭/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小昭/3.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小昭/4.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小昭/5.avif"]
    },{
        name: "解卿舟",
        title: "T0奶妈",
        desc: "你身上有让人开心的魔法！",
        tags: ["单挑田英", "小江", "霁月光风"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar21.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小江/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小江/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小江/3.avif"]
    },{
        name: "林千曲",
        title: "分魂",
        desc: "你好，我叫林千曲！可我又不只是林千曲，嘻嘻！",
        tags: ["可爱捏", "小水", "猜猜我是谁？"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar31.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/林千曲/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/林千曲/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/林千曲/3.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/林千曲/4.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/林千曲/5.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/林千曲/6.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/林千曲/7.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/林千曲/8.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/林千曲/9.avif"]
    },{
        name: "天涯客|未央",
        title: "保卫科",
        desc: "练习千万武学，却无一门精通，在下未央是也！",
        tags: ["唐刀大王", "三姓家奴（？）", "仇杀老大！","本瘾十重","打本特工队队长","赏金猎人钟爱者"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar33.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/未央/9.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/未央/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/未央/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/未央/3.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/未央/4.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/未央/5.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/未央/6.avif"]
    },{
        name: "空落来",
        title: "玉玉大王",
        desc: "什么？未央又说我偷懒？",
        tags: ["飞天伞", "玉玉大王", "偷偷输出"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar82.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/空落来/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/空落来/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/空落来/3.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/空落来/4.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/空落来/5.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/空落来/6.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/空落来/7.avif"]
    },{
        name: "关心京",
        title: "小老婆",
        desc: "就是有点想保护他的感觉。",
        tags: ["小老公！", "心碎了很多瓣", "只取一瓢？"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar36.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/关心京1.avif"]
    },{
        name: "雨半生",
        title: "隐身",
        desc: "悄悄滴，打枪滴不要。",
        tags: ["厚薄发", "小雨", "偷偷观察"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar22.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/雨半生1.avif"]
    },{
        name: "枕矜眠",
        title: "忙碌中",
        desc: "忙啊，忙点好啊。",
        tags: ["忙", "偷偷观察"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar49.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/枕矜眠1.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "梧时易",
        title: "双刀大王",
        desc: "双刀刮背，特别粘人，武功高强。",
        tags: ["博弈大王", "喜欢调教", "黄金腱鞘"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar22.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小时/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小时/1.avif"]
    },{
        name: "鉴照月明",
        title: "炎之分魂",
        desc: "如雾气弥漫，留下模糊的足迹，又悄然散去。",
        tags: ["神秘"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar16.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/鉴照月明/1.avif"]
    },{
        name: "闻人弈",
        title: "无名皇帝",
        desc: "无名的剑气将要划过你的脖颈。",
        tags: ["虹虹玩家", "强力剑气", "弈！悟！"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar82.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小火/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小火/2.avif"]
    },{
        name: "叶云青",
        title: "强力外援",
        desc: "身在曹营心在汉。",
        tags: ["九九玩家", "可爱小羊"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar15.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/青云/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/青云/2.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "纸杯杯杯",
        title: "凉凉",
        desc: "喜欢躺地上，喜欢收藏杯子。",
        tags: ["无名小王", "偷偷学习", "又尽力了","燕云王语嫣"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar42.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/纸杯杯/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/纸杯杯/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/纸杯杯/3.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/纸杯杯/4.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/纸杯杯/5.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/纸杯杯/6.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/纸杯杯/7.avif"]
    },{
        name: "名無凪",
        title: "本体是雷语",
        desc: "像未出鞘的刀，静立无声，偶然一句，便使众人身旁空气骤然撕裂。",
        tags: ["喜欢腋下", "小鸟在哪里？","梦酒殇之师"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar83.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小名1.avif"]
    },{
        name: "解卿舟",
        title: "T0奶妈",
        desc: "你身上有让人开心的魔法！",
        tags: ["单挑田英", "小江", "霁月光风"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar21.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小江/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小江/2.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/小江/3.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },{
        name: "峰伈",
        title: "社长",
        desc: "为人仁厚，重情重义。",
        tags: ["虹虹玩家", "紫色韵味", "开服玩家"],
        avatar: "https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar11.avif",
        art: ["https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/1.avif","https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/verticalPainting/峰伈/2.avif"]
    },
    // ...添加更多角色
];

const currentCharacterIndex = ref(0);
const currentArtIndex = ref(0);
const currentCharacter = ref(characterData[0]);
const loading = ref(false);
const progress = ref(0);

// 监听当前角色索引变化，更新当前角色数据
watch(currentCharacterIndex, (newIndex) => {
  currentCharacter.value = characterData[newIndex];
  currentArtIndex.value = 0;
  // 显示角色信息并重置计时器
  showCharacterInfo();
  clearTimeout(hideTimer);
  hideTimer = setTimeout(hideCharacterInfo, time);
});

// 处理图片加载，设置合适的object-fit属性
const handleImageLoad = (event) => {
  const img = event.target;
  
  // 获取图片原始宽高
  const imgWidth = img.naturalWidth;
  const imgHeight = img.naturalHeight;
  
  // 移除所有可能的类
  img.classList.remove('character-art-img-wide', 'character-art-img-tall-cover', 'character-art-img-tall');
  
  // 计算图片宽高比
  const imgAspectRatio = imgWidth / imgHeight;
  
  if (imgAspectRatio > 1.3) {
    // 宽是高的1.3倍以上，使用cover
    img.classList.add('character-art-img-wide');
  } else {
    // 否则使用contain
    img.classList.add('character-art-img-tall');
  }
};

// 切换到下一张立绘
const nextCharacterArt = () => {
  if (currentCharacter.value.art.length > 1) {
    currentArtIndex.value = (currentArtIndex.value + 1) % currentCharacter.value.art.length;
  }
};
// 声明隐藏计时器变量
let hideTimer;
let characterInfoPanel;
let time = 2000;

// 显示角色信息面板文字
function showCharacterInfo() {
    if (characterInfoPanel) {
        characterInfoPanel.style.opacity = '1';
        characterInfoPanel.style.transition = 'opacity 0.25s ease-in-out';
    }
}

// 隐藏角色信息面板文字
function hideCharacterInfo() {
    if (characterInfoPanel) {
        characterInfoPanel.style.opacity = '0';
        characterInfoPanel.style.transition = 'opacity 1s ease-in-out';
    }
}

onMounted(() => {
  
  // 在组件挂载后获取DOM元素
  characterInfoPanel = document.getElementById('character-info-panel');
  
  // 监听图片加载完成事件
  const imgElement = document.getElementById('character-art-img');
  if (imgElement && imgElement.complete) {
    // 如果图片已经加载完成，手动触发加载事件
    handleImageLoad({ target: imgElement });
  }
  
  if (characterInfoPanel) {
    // 为角色信息面板添加鼠标事件监听器
    characterInfoPanel.addEventListener('mouseenter', function() {
        // 清除计时器并显示文字
        clearTimeout(hideTimer);
        showCharacterInfo();
    });

    characterInfoPanel.addEventListener('mouseleave', function() {
        // 设置6秒后隐藏文字的计时器
        hideTimer = setTimeout(hideCharacterInfo, time);
    });
    
    // 页面加载完成后，设置6秒后隐藏文字的计时器
    hideTimer = setTimeout(hideCharacterInfo, time);
  }
});
</script>

<template>
  <div id="toCharacters" class="video-section-spacer">
    <div class="section-header">
      <h2 class="section-title">百业人员</h2>
      <p class="section-subtitle">精英人才，各展风采</p>
    </div>
  </div>

  <section id="characters" class="video-section character-bg-img3">
    <!-- <div class="section-overlay2"></div> -->
    <div class="character-intro-container">
      <div class="character-list" id="character-list">
        <div v-for="(character, index) in characterData" :key="index"
             :class="['character-list-item', index === currentCharacterIndex ? 'active' : '']"
             @click="currentCharacterIndex = index">
          <img :src="character.avatar" :alt="character.name">
          <span>{{ character.name }}</span>
        </div>
      </div>
      <div class="character-detail">
        <div id="character-info-panel" class="character-info-panel">
          <h1 id="character-name">{{ currentCharacter.name }}</h1>
          <p id="character-title" class="character-title">{{ currentCharacter.title }}</p>
          <div id="character-tags" class="character-tags">
            <span v-for="(tag, index) in currentCharacter.tags" :key="index" class="tag">{{ tag }}</span>
          </div>
          <p id="character-desc" class="character-desc">{{ currentCharacter.desc }}</p>
        </div>
        <div class="character-art" :class="loading ? 'loading' : ''">
          <div class="progress-container">
            <div id="loading-progress" class="progress-bar" :style="{ width: progress + '%' }"></div>
          </div>
          <img id="character-art-img" :src="currentCharacter.art[currentArtIndex]" :alt="currentCharacter.name" @click="nextCharacterArt" @load="handleImageLoad">
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
/* 视频区域间距 */
.video-section-spacer {
  height: 250px;
  min-width: 1920px;
  width: 100vw;
  background: transparent;
  background-color: #1A202C;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平居中 */
}

/* 视频背景区域 */
.video-section {
  position: relative;
  min-height: 1080px;
  min-width: 1920px;
  width: 100vw;
  height: 100vh;
}

.section-overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(136, 99, 179, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 2;
}

.video-section .container {
  position: relative;
  z-index: 3;
}

.section-header {
  text-align: center;
  margin-top: 0px;
}

.section-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #2D3748;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #2D3748, #4A5568);
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #718096;
  font-weight: 300;
}

.character-intro-container {
    position: relative;
    min-height: 1080px;
    min-width: 1920px;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    /* overflow: hidden; */
}

.character-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: 90vh;
    /* width: 19vw; */
    min-height: 1200px;
    width: 450px;
    gap: 20px;
    background: #1A202C;
    border-radius: 0px;
    padding: 20px 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,1);
    align-content: flex-start;
    position: relative; /* 设置为相对定位 */
    z-index: 10; /* 设置较高的z-index，使其位于character-detail上方 */
    margin: 0 30px; /* 负边距让列表部分重叠在detail上 */
    top: 5vh;
}

.character-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px 10px;
    border-radius: 0;
    transition: background 0.2s;
    max-width: 100px; /* 固定宽度确保列对齐 */
    color: #ffffff;
}

.character-list-item.active,
.character-list-item:hover {
    background: linear-gradient(135deg, #2D3748 60%, #4A5568 100%);
    box-shadow: 0 4px 20px rgb(0, 0, 0);
    color: #fff;
}

.character-list-item img {
    max-width: 70px;
    max-height: 70px;
    min-width: 70px;
    min-height: 70px;
    width: 2.5vw;
    border-radius: 0;
    margin-bottom: 8px;
    border: 2px solid #E2E8F0;
}

.character-detail {
    position: absolute; /* 设置为绝对定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* 四边都设为0，使其铺满容器 */
    gap: 40px;
    min-width: 1920px;
    min-height: 1080px;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* 设置较低的z-index，使其位于列表下方 */
}

#character-name {
  font-size: 8.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.character-title {
  font-size: 1.2rem;
  color: #CBD5E0;
  margin-bottom: 15px;
}

.character-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.tag {
  background: rgba(247, 250, 252, 0.1);
  color: #F7FAFC;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
}

.character-desc {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  color: #E2E8F0;
}

.character-art {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vwvw;
    height: 100vh;
    min-height: 1080px;
    min-width: 1920px;
    position: relative;
    background: linear-gradient(135deg, rgba(154, 103, 211, 0.2) 10%, rgba(0, 0, 0, 0.8) 100%);
}

.character-art img {
    border-radius: 0px;
    display: block; /* 去除底部空隙 */
    width: 100%;
    height: 100%;
}

/* 宽是高的1.3倍以上使用 cover */
.character-art-img-wide {
    object-fit: cover;
}

/* 否则使用 contain */
.character-art-img-tall {
    object-fit: contain;
}

.character-info-panel {
    position: absolute;
    left: 55%;
    top: 300px;
    transform: translateY(-50%);
    z-index: 2;
    width: 800px;
    background: rgba(255,255,255,0.0);
    border-radius: 20px;
    padding: 0px 30px 30px 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.0);
}

.character-info-panel h1 {
    color: #ffffff;
    font-size: 12.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.character-info-panel .character-title {
    color: #ffffff;
    font-size: 3.1rem;
    margin-bottom: 18px;
}

.character-tags {
    margin-bottom: 18px;
}
.character-tags .tag {
    display: inline-block;
    background: linear-gradient(135deg, #EDF2F7, #E2E8F0);
    color: #4A5568;
    padding: 6px 16px;
    border-radius: 15px;
    font-size: 0.95rem;
    font-weight: 500;
    margin-right: 8px;
    margin-bottom: 6px;
}

.character-info-panel .character-desc {
    color: #ffffff;
    font-size: 2.1rem;
    line-height: 1.7;
    width: 70%;
}
</style>